 <template>
	<div id="entry_container" :style="{height: winHeight}">
		<div id="entry">
			<router-link v-for="(list, key) in lists" :to="list.path" :key="key"
			v-if="user[list.key] === '0' ">{{list.name}}</router-link>
		</div>
		<div id="select_role">
			<span class="heart" @click="selectShow = !selectShow">❤</span>
			<span v-show="selectShow">
				<span v-for="s in select"
				:class="{active: selectId == s.openid}"
				@click="setId(s.openid)">{{s.name}}</span>
			</span>
		</div>
	</div>
</template>
<script type="text/javascript">
// require('./assets/lib/jssdk.js')
	import {getUser} from './assets/js/global.js'
	export default{
		name:'entry',
		data(){
			return{
				lists: [{
					name: '发起报修',
					path: '/repair/list/user',
					key: 'hasStart'
				},{
					name: '分配报修单',
					path: '/repair/list/boss',
					key: 'hasAllocation'
				},{
					name: '处理报修问题',
					path: '/repair/list/repairman',
					key: 'hasHandle'
				},{
					name: '分诊报修问题',
					path: '/repair/list/dispatcher',
					key: 'hasTriage'
				}],
				user: {
					hasStart: '0',
					hasAllocation: '1',
					hasHandle: '1',
					hasTriage: '1'
				},
				select:[{
					name: '迟秋田（维修人员）',
					openid: 'test1'
				},{
					name: '杨蕾蕾（部门负责人）',
					openid: 'test2'
				// },{
				// 	name: '李金铎（分诊台）',
				// 	openid: 'test3'
				}],
				selectId: 'test1',
				selectShow: false
			}
		},
		mounted(){
			this.selectId = localStorage.getItem('customId') || 'test1';
			getUser().then((user) => {
				if(!user) return;
				this.user = user;
			})
		},
		methods:{
			setId(id) {
				this.selectId = id;
				localStorage.setItem('customId', id);
				getUser(id).then((user) => {
					this.user = user;
				})
			}
		},
		computed:{
			winHeight(){
				return window.innerHeight + 'px';
			}
		}
	}
</script>
<style lang='less' scoped>
	#entry_container{
		position: relative;
		padding-top: .1rem;
		background: url(./assets/img/clock.png) left .5rem no-repeat,
					url(./assets/img/dividers@1.5x.png) 1.44rem 7.5rem no-repeat,
					url(./assets/img/dividers@1.5x.png) 6.89rem 12.47rem no-repeat,
					url(./assets/img/globus@1.5x.png) right 1.5rem no-repeat,
					url(./assets/img/email@1.5x.png) left bottom no-repeat;
		background-size: 30%;
	}
	#entry{
		margin-top: 2rem;
		a{
			background:#ffffff;
			box-shadow:0px 0px 10px 2px rgba(99,166,242,0.40);
			border-radius:0.16rem;
			width:6.27rem;
			height:2rem;
			line-height: 2rem;
			font-size: 0.53rem;
			color: #333;
			display: block;
			text-align: center;
			margin: 1.07rem auto;
		}
	}
	#select_role{
		display: none;
		font-size: .3rem;
		position: absolute;
		bottom: .3rem;
		left: .3rem;
		.active{
			color: #64a6f2;
		}
	}
</style>
